<template>
    <el-form label-width="90px" size="small">
        <el-form-item label="表单名">
            <el-input
                v-model="formConf.formRef"
                placeholder="请输入表单名（ref）"
            />
        </el-form-item>
        <el-form-item label="表单模型">
            <el-input
                v-model="formConf.formModel"
                placeholder="请输入数据模型"
            />
        </el-form-item>
        <el-form-item label="校验模型">
            <el-input
                v-model="formConf.formRules"
                placeholder="请输入校验模型"
            />
        </el-form-item>
        <el-form-item label="表单尺寸">
            <el-radio-group v-model="formConf.size">
                <el-radio-button label="medium">
                    中等
                </el-radio-button>
                <el-radio-button label="small">
                    较小
                </el-radio-button>
                <el-radio-button label="mini">
                    迷你
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="标签对齐">
            <el-radio-group v-model="formConf.labelPosition">
                <el-radio-button label="left">
                    左对齐
                </el-radio-button>
                <el-radio-button label="right">
                    右对齐
                </el-radio-button>
                <el-radio-button label="top">
                    顶部对齐
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="标签宽度">
            <el-input
                v-model.number="formConf.labelWidth"
                placeholder="请输入标签宽度"
                type="number"
            />
        </el-form-item>
        <el-form-item label="栅格间隔">
            <el-input-number
                v-model="formConf.gutter"
                :min="0"
                placeholder="栅格间隔"
            />
        </el-form-item>
        <el-form-item label="禁用表单">
            <el-switch v-model="formConf.disabled" />
        </el-form-item>
        <el-form-item label="表单按钮">
            <el-switch v-model="formConf.formBtns" />
        </el-form-item>
        <el-form-item label="显示未选中组件边框">
            <el-switch v-model="formConf.unFocusedComponentBorder" />
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: 'FormConfig',
    props: ['showField', 'activeData', 'formConf']
}
</script>

<style scoped>

</style>
